<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>编号查询</title>

    <link rel="stylesheet" th:href="@{/css/layui.css}">
    <link rel="stylesheet" th:href="@{/css/query.css}">
    <script th:src="@{/js/vue.min.js}"></script>
    <script th:src="@{/js/axios.min.js}"></script>
    <script th:src="@{/js/layui.js}"></script>

</head>
<body>

<div id="container" class="layui-fluid">
    <div class="layui-row layui-col-space14 check-function">
        <div class="layui-col-md3">
            <input class="layui-input" type="text" required placeholder="请输入要查询的名字" v-model="name">
        </div>
        <div class="layui-col-md1">
            <button type="button" class="layui-btn layui-btn-normal" v-on:click="click">查询</button>
        </div>
    </div>

    <table id="table">

    </table>


</div>
</body>


<script th:inline="none">


    let vue = new Vue({
        el: '#container',
        data: {
            items: [],
            name: '',
            date: new Date()
        },
        methods: {
            click: function () {


                if (this.name.trim().length == 0) {
                    let str = '请输入正确名字!'
                    layer.alert(str, {
                        time: 3000
                    })
                    return;
                }

                layui.use('table', function () {
                    var table = layui.table;

                    table.render({
                        elem: '#table'
                        , url: "/user/name"
                        , cols: [[
                            {field: 'id', title: "编号ID", width: "10%"},
                            {field: 'name', title: "姓名", width: "10%"},
                            {field: 'sex', title: "性别", width: "5%"},
                            {field: 'address', title: "地址", width: "25%"},
                            {field: 'homePhone', title: "家庭电话", width: "15%"},
                            {field: 'workPhone', title: "公司电话", width: "15%"},
                            {field: 'phones', title: "手机号", width: "20%"}
                        ]],
                        where: {
                            name: vue.$data.name,
                            date: vue.$data.date.toUTCString()
                        }
                        , parseData: function (res) {
                            for (var i = 0; i < res.list.length; i++) {
                                var s = '<dl>';
                                for (var j = 0; j < res.list[i].phones.length; j++) {
                                    s = s + '<dd>' + res.list[i].phones[j].phoneNumber + '</dd>';
                                }
                                s += '</dl>'
                                res.list[i].phones = s;

                                var ns = ""
                                if(res.list[i].address != '') {
                                    var ss = res.list[i].address.split(",");
                                    for (var j = 0 ; j < ss.length ; j++) {
                                        ns+=ss[j];
                                    }
                                }
                                res.list[i].address = ns;
                            }
                            return {
                                "code": 0,
                                "msg": "",
                                "count": res.total,
                                "data": res.list
                            }
                        },
                        page: true
                        , limit: 5
                        , limits: [5, 10, 20, 30]
                    })
                })


            }
        },

    })

    layui.use('table', function () {
        var table = layui.table;

        table.render({
            elem: '#table'
            , url: "/user/name"
            , cols: [[
                {field: 'id', title: "编号ID", width: "10%"},
                {field: 'name', title: "姓名", width: "10%"},
                {field: 'sex', title: "性别", width: "5%"},
                {field: 'address', title: "地址", width: "25%"},
                {field: 'homePhone', title: "家庭电话", width: "15%"},
                {field: 'workPhone', title: "公司电话", width: "15%"},
                {field: 'phones', title: "手机号", width: "20%"}
            ]],
            where: {
                name: '---------------------',
                date: vue.$data.date.toUTCString()
            }
            , parseData: function (res) {

                for (var i = 0; i < res.list.length; i++) {
                    var s = '<dl>';
                    for (var j = 0; j < res.list[i].phones.length; j++) {
                        s = s + '<dd>' + res.list[i].phones[j].phoneNumber + '</dd>';
                    }
                    s += '</dl>'
                    res.list[i].phones = s;

                    var ns = ""
                    if(res.list[i].address != '') {
                        var ss = res.list[i].address.split(",");
                        for (var j = 0 ; j < ss.length ; j++) {
                            ns+=ss[j];
                        }
                    }
                    res.list[i].address = ns;
                }

                return {
                    "code": 0,
                    "msg": "",
                    "count": 0,
                    "data": res.list
                }
            },
            page: true
            , limit: 5
            , limits: [5, 10, 20, 30]
        })
    })


</script>
</html>